import { Col, Row, Button, Checkbox, Form, Input, Alert} from 'antd';
import { useState } from 'react';
import request from "../framework/common/utils/request";
import { getQuery } from "../framework/common/utils";

import "./login.css"

export default function Login(){

    const cookieUsercode = getCookie("managerUsername")
    const [data, setData] = useState({
        submitBtnLoading: false,//登录按钮loading状态
        errorMsg: "",//表单校验错误信息
        initialValues: {
            usercode: cookieUsercode,//用户名
            rememberLogin: cookieUsercode ? true : false,//记住账号
        }
    })

    return <Row className=''>
        <Col className='relative login-left' span={12}>
            <img src='/frontend/build/images/login-logo.png' width={80} className="absolute left-5 top-5" />
        </Col>
        <Col className='login-right bg-white relative' span={12}>
            <div className='content'>
                <h2 className="login-title mb-3 text-666">明源云·天际</h2>
                <div className="tip">欢迎进入流程平台</div>
                <Form
                    name="basic"
                    initialValues={data.initialValues}
                    onFinish={(values)=>{
                        //校验成功

                        //1.给按钮添加loading信息
                        setData({
                            ...data,
                            submitBtnLoading: true,
                            errorMsg: ""
                        });
                        console.log(values);
                        //2.调用登录接口
                        request({
                            url: '/platform/login/do-login',
                            method: 'POST',
                            data: values,
                            noTip: true
                        }).then(
                            function(res){
                                if(res?.code === 1){//请求成功
                                    if (values.rememberLogin) {//勾选了记住账号，记录一个cookie缓存
                                        setCookie({
                                            name: "managerUsername",
                                            value: values.usercode,
                                            iDay: 14
                                        })
                                    } else {
                                        setCookie({
                                            name: "managerUsername",
                                            value: "",
                                            iDay: -1
                                        })
                                    }
                                    //跳转到应用管理页面
                                    let urlParams = getQuery();
                                    let gotoUrl = "/platform-manage/application";//默认成功后跳转到管理页面
                                    if(urlParams.backurl){
                                        gotoUrl = urlParams.backurl;//存在返回页时，跳转到返回页
                                    }
                                    window.location.href = gotoUrl;//登录成功后跳转到对应页面
                                }else{
                                    setData({
                                        // ...data,
                                        submitBtnLoading: false,
                                        errorMsg: res?.message
                                    });
                                }
                            },
                            function(res){
                                setData({
                                    ...data,
                                    submitBtnLoading: false,
                                    errorMsg: res?.message
                                });
                            }
                        )
                    }}
                    onFinishFailed={()=>{
                        console.log("onFinishFailed")
                    }}
                    autoComplete="off"
                >

                    {
                        data.errorMsg !== ""
                        && <Alert
                                des="登录错误提示"
                                className='login-form-error'
                                message={data.errorMsg}
                                type="error"
                                showIcon
                            />
                    }

                    <Form.Item
                        name="usercode"
                        rules={[
                        {
                            required: true,
                            message: '账户不能为空',
                        },
                        ]}
                    >
                        <Input
                            className='text-sm'
                            prefix={<img className='w-14px' src="" />} 
                            size={"large"}
                            placeholder="用户名"
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                        {
                            required: true,
                            message: '密码不能为空',
                        },
                        ]}
                    >
                        <Input
                            className='text-sm'
                            prefix={<img className='w-14px' src="" />} 
                            type="password"
                            placeholder="密码"
                            size={"large"}
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button 
                            className='login-submit'
                            type="primary"
                            htmlType="submit"
                            block size={"large"}
                            loading={data.submitBtnLoading}
                        >登录</Button>
                    </Form.Item>

                    <div className=' overflow-hidden'>
                        <Form.Item
                            className='float-left'
                            name="rememberLogin"
                            valuePropName="checked"
                        >
                            <Checkbox className='text-color-999'>记住账号</Checkbox>
                        </Form.Item>
                        {
                            false &&
                            <div className="go-login-auth float-right text-color-999 leading-8">天际开发者账户 <a href="/szw/bpm/oauth2/sso/private">登录 →</a></div>
                        }
                    </div>
                </Form>
            </div>

            <div className="qrcode-wrap">
                <div className="qrcode-content">
                    <img src="/public/imgs/qrcode.jpg" />
                    <div className="qrcode-mask"></div>
                </div>
                <div className="tooltip">
                    <span>扫一扫更了解我们！</span>
                </div>
            </div>

            <p
                className=' text-color-cdd3df absolute text-center bottom-6 w-full'
            >Copyright © 2022 明源云 版权所有</p>
        </Col>
    </Row>
}

function setCookie({
    name, 
    value, 
    iDay
}) {
    //name名字value值iDay多少天过期
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay); //参数传多少天，就过期多少天
    document.cookie = name + "=" + value + ";expires=" + oDate;
}

function getCookie(name) {
    var arr = document.cookie.split("; ");
    for (var i = 0; i < arr.length; i++) {
    var arr2 = arr[i].split("=");
    if (arr2[0] === name) {
        return arr2[1];
    }
    }
    return ""; //如果没找到返回空字符串。
}

function removeCookie(name) {
    setCookie(name, 1, -1); //设置-1天过期，代表昨天已经过期
}